@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h1>Post-Sales</h1>
    <small>Manage Post-Sales</small>
@stop
@section('content')
    <div class="card card-dark">
        <div class="card-header">
            <h3 class="card-title">Add Post-Sales</h3>
        </div>
        @if (session('error'))
            <h6 class="alert alert-danger">
                {{ session('error') }}
            </h6>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" id="add_post-sales" role="form" action="{{ route('post-sales.store') }}" class="jqueryValidation">
            @csrf
            <div class="card-body">
                <div class="form-group">
                    <label for="title">Title</label>
                    <x-adminlte-input class="form-control" id="title" name="title" placeholder="Enter Title"
                        value="{{ old('title') }}" required />
                </div>

                <div class="form-group">
                    <label for="lead_source">Lead Source</label>
                    <select class="form-control" name="lead_source" id="" required>
                        <option value="">--Select--</option>
                        @foreach ($lead_sources as $lead_source)
                            <option value="{{ $lead_source->id }}">{{ $lead_source->name }}</option>
                        @endforeach
                    </select>
                </div>




                <div class="form-group">
                    <label for="assign_to">Assign to</label>
                    <select class="form-control" name="assign_to" required>
                        <option value="">--Select--</option>
                        @foreach ($users as $user)
                            <option value="{{ $user->id }}">{{ $user->first_name . $user->last_name }}</option>
                        @endforeach
                    </select>
                </div>


                {{-- <div class=" form-group">
                    <label for="customer">Customer</label>
                    <x-adminlte-input class="form-control" id="customer_id" name="customer_id" placeholder="Enter Customer"
                        value="{{ old('customer_id') }}" />
                </div> --}}


                <div class="form-group">
                    <label for="status">Salutation</label>
                    <select class="form-control" name="salutation" id="" required>
                        <option value="">--Select--</option>
                        @foreach (App\Models\Lead::Lead_salutation as $key => $Lead_salutation)
                            <option value="{{ $key }}">{{ $Lead_salutation }}</option>
                        @endforeach
                    </select>
                </div>


                <div class="form-group">
                    <label for="first_name">First Name</label>
                    <x-adminlte-input class="form-control" id="first_name" name="first_name" placeholder="Enter First Name"
                        value="{{ old('first_name') }}" required />
                </div>
                <div class="form-group">
                    <label for="last_name">Last Name</label>
                    <x-adminlte-input class="form-control" id="last_name" name="last_name" placeholder="Enter Last Name"
                        value="{{ old('last_name') }}" required />
                </div>
                <div class=" form-group">
                    <label for="gender"> Gender</label>
                    <select class="form-control" id="" name="gender" required>
                        <option value="">--Select--</option>
                        @foreach (App\Models\Lead::Lead_gender as $key => $Lead_gender)
                            <option value="{{ $key }}">{{ $Lead_gender }}</option>
                        @endforeach
                        <select>
                </div>
                <div class=" form-group">
                    <label for="property_interest_type"> Property Interest Type</label>
                    <select class="form-control" id="" name="property_interest_type" required>
                        <option value="">--Select--</option>
                        @foreach (App\Models\Lead::property_interest_type as $key => $property_interest_type)
                            <option value="{{ $key }}">{{ $property_interest_type }}</option>
                        @endforeach
                        <select>
                </div>

                <div class="form-group">

                    <input type="checkbox" id="is_organization" name="is_organization" value="1" checked
                        {{ old('is_organization') == 'on' ? 'checked' : '' }}>
                    <label for="is_organization">Is Organisation</label>
                </div>

                <div class=" form-group">
                    <label for="organization_name">Organisation Name</label>
                    <x-adminlte-input class="form-control" id="organization_name" name="organization_name"
                        placeholder="Enter Organization Name" value="{{ old('organization_name') }}" />
                </div>



                <div class="form-group">
                    <label for="tags">Tags </label>
                    <input type="text" name="input" class="form-control" placeholder="Add tags" required>
                </div>
                <div class="form-group">
                    <label for="designation"> Designation </label>
                    <x-adminlte-input type=" form-control " class="form-control" id="designation" name="designation"
                        placeholder="Enter Designation" value="{{ old('designation') }}" required />
                </div>

                <div class="form-group">
                    <label for="budget-range">Budget Range</label>
                    <div class="d-flex">
                        <x-adminlte-input type="number" class="form-control" id="minBudget" name="minBudget" placeholder="Min Budget" />
                        <span class="mx-2">to</span>
                        <x-adminlte-input type="number" class="form-control" id="maxBudget" name="maxBudget" placeholder="Max Budget" />
                    </div>
                    <input type="hidden" id="budget" name="budget">
                    <small id="budgetError" class="text-danger" style="display: none;">Minimum budget cannot be greater than the maximum budget!</small>
                </div>

                <div class="form-group">
                    <label for="email">Email</label>
                    <x-adminlte-input type="email" class="form-control" id="email" name="email"
                        placeholder="Enter Email" required />
                </div>
                <div class="form-group">
                    <label for="website">Website</label>
                    <x-adminlte-input type="form-control" class="form-control" id="website" name="website"
                        placeholder="Enter website" required />
                </div>
                <div class="form-group">
                    <label for=" phone_number"> Phone number</label>
                    <x-adminlte-input type="number" class="form-control" id="phone_number" name="phone_number"
                        placeholder="Enter  Phone number" required />
                </div>
                <div class="form-group">
                    <label for=" mobile_number"> Mobile Number</label>
                    <x-adminlte-input type="number" class="form-control" id="mobile_number" name="mobile_number"
                        placeholder="Enter  Mobile Number" required />
                </div>
                <div class="form-group">
                    <label for="description">Description</label>
                    <textarea class="form-control" id="description" name="description" rows="4" placeholder="Enter Description"
                        required></textarea>
                </div>


                <div class="form-group">
                    <label for=" last_contacted"> Last Contacted</label>
                    <x-adminlte-input type="date" class="form-control" id="last_contacted " name="last_contacted"
                        placeholder="Enter  Last Contacted" required :min="now()->toDateString()"/>
                </div>
                <div class="form-group">
                    <label for=" next_follow_up"> Next Follow up</label>
                    <x-adminlte-input type="date" class="form-control" id="next_follow_up" name="next_follow_up"
                        placeholder="Enter  Next Follow up" required :min="now()->toDateString()" />
                </div>

                <div class="form-group">
                    <label for="address_line_1"> Adress Line 1 </label>
                    <x-adminlte-input type=" form-control " class="form-control" id="address_line_1"
                        name="address_line_1" placeholder="Enter Adress Line 1" value="{{ old('address_line_1') }}" />
                </div>

                <div class="form-group">
                    <label for="address_line_2"> Adress Line 2 </label>
                    <x-adminlte-input type=" form-control " class="form-control" id="address_line_2"
                        name="address_line_2" placeholder="Enter Adress Line 2" value="{{ old('address_line_2') }}" />
                </div>
                <div class="form-group">
                    <label for="country">Select your Country</label>
                    <select name="country" id="country" class="form-control select2" required>
                        <option value="">Select Country</option>
                        @foreach ($countries as $key => $value)
                            <option value="{{ $value->id }}">{{ $value->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label for="state">Select your State</label>
                    <select name="state" id="state" class="form-control select2" required>
                        <option value="">Select State</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="city">Select your City</label>
                    <select name="city" id="city" class="form-control select2">
                        <option value="">Select City</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="postal_code"> Postal Code </label>
                    <x-adminlte-input type=" form-control " class="form-control" id="postal_code" name="postal_code"
                        placeholder="Enter Postal Code" value="{{ old('postal_code') }}" required />
                </div>
                <input type="hidden" name="type" value="postSales">
                <div class=" form-group">
                    <label for="post_status">Post Status</label>
                    <select name="post_status" id="post_status" class="form-control" required>

                        @foreach (App\Models\Lead::post_status as $key => $post_status)
                        <option value="{{ $key }}">
                            {{ $post_status }}
                        </option>
                    @endforeach
                    </select>
                </div>



            </div>

            <div class="card-footer d-flex justify-content-end">
                <a href="{{ route('leads.index') }}" class="btn btn-danger mx-1">Cancel</a>
                <button type="submit" class="btn btn-dark mx-1">Submit</button>
            </div>
        </form>
    @stop

    @push('js')
        {{-- country-state-city --}}
        <script type="text/javascript">
            $(document).ready(function() {
                //Initialize Select2 Elements
                $('.select2').select2();
                
                
                $('select[name="country"]').on('change', function() {
                    // alert(" {{ url('/getStates') }} / + country_id ");
                    let country_id = $(this).val();
                    
                    console.log('country_id');
                    console.log(country_id);
                    
                    // alert("{{ '/getStates' }}/" + country_id);

                    if (country_id) {
                        $.ajax({
                            // url: "{{ '/getStates' }}/" + country_id,
                            url: "{{ route('states.get', '') }}/" + country_id,
                            type: "GET",
                            dataType: "json",
                            success: function(data) {
                                console.log(data);
                                $('select[name="state"]').empty();
                                $.each(data, function(key, value) {
                                    $('select[name="state"]').append(
                                        '<option value="' +
                                        key + '">' + value + '</option>');
                                });
                            }
                        });
                    } else {
                        $('select[name="state"]').empty();
                    }
                });
                $('select[name="state"]').on('change', function() {
                    var state_id = $(this).val();
                    if (state_id) {
                        $.ajax({
                            // url: "{{ '/getCities' }}/" + state_id,
                            url: "{{ route('cities.get', '') }}/" + state_id,
                            type: "GET",
                            dataType: "json",
                            success: function(data) {
                                console.log(data);
                                $('select[name="city"]').empty();
                                $.each(data, function(key, value) {
                                    $('select[name="city"]').append('<option value="' +
                                        key + '">' + value + '</option>');
                                });
                            }
                        });
                    } else {
                        $('select[name="city"]').empty();
                    }
                });
            });
            // {{-- End country-state-city --}}
            // tags
            $(document).ready(function() {
                $('input[name="input"]').tagsinput({
                    trimValue: true,
                    confirmKeys: [13, 44, 32]
                });

                $('.bootstrap-tagsinput input').on('focus', function() {
                    $(this).closest('.bootstrap-tagsinput').addClass('has-focus');
                }).on('blur', function() {
                    $(this).closest('.bootstrap-tagsinput').removeClass('has-focus');
                });
            });
            // End-tags

            document.addEventListener('DOMContentLoaded', function() {
    const minBudgetInput = document.getElementById('minBudget');
    const maxBudgetInput = document.getElementById('maxBudget');
    const budgetInput = document.getElementById('budget');
    const budgetError = document.getElementById('budgetError');

    // Function to validate and update the hidden budget field
    function validateAndUpdateBudget() {
        const minBudget = parseFloat(minBudgetInput.value) || 0; // Default to 0 if empty
        const maxBudget = parseFloat(maxBudgetInput.value) || 0; // Default to 0 if empty

        // Check if minBudget is greater than maxBudget
        if (minBudget >= maxBudget) {
            budgetError.style.display = 'block'; // Show error message
            budgetInput.value = ''; // Clear the hidden input field
            minBudgetInput.classList.remove('valid');
            maxBudgetInput.classList.remove('valid');
            minBudgetInput.classList.add('error');
            maxBudgetInput.classList.add('error');
            return false; // Prevent form submission
        } else {
            budgetError.style.display = 'none'; // Hide error message
            budgetInput.value = `${minBudget}-${maxBudget}`; // Set hidden field value
            minBudgetInput.classList.remove('error');
            maxBudgetInput.classList.remove('error');
            minBudgetInput.classList.add('valid');
            maxBudgetInput.classList.add('valid');
            return true; // Allow form submission
        }
    }

    // Add event listeners for both inputs to trigger validation on change
    minBudgetInput.addEventListener('input', validateAndUpdateBudget);
    maxBudgetInput.addEventListener('input', validateAndUpdateBudget);

    // Optional: Form submission validation
    document.getElementById('yourFormId').addEventListener('submit', function(event) {
        if (!validateAndUpdateBudget()) {
            event.preventDefault(); // Prevent form submission if validation fails
        }
    });

    // Initialize validation on load
    validateAndUpdateBudget();
});

            // OrganizationName field
            $(document).ready(function() {
                function toggleOrganizationName() {
                    if ($('#is_organization').is(':checked')) {
                        $('#organization_name').prop('disabled', false);
                    } else {
                        $('#organization_name').prop('disabled', true);
                    }
                }
                // Initial check
                toggleOrganizationName();

                // Listen for changes
                $('#is_organization').change(function() {
                    toggleOrganizationName();
                });
            });
            // End OrganizationName field
        </script>
    @endpush